/**
 * [参考文档]
 * https://juejin.cn/post/7244818201976078394#comment
 * https://alfred-skyblue.github.io/unocss-docs-cn/
 */
import { FileSystemIconLoader } from '@iconify/utils/lib/loader/node-loaders'
import presetRemToPx from '@unocss/preset-rem-to-px'
import transformerVariantGroup from '@unocss/transformer-variant-group'
import { defineConfig, presetAttributify, presetIcons, presetUno, transformerDirectives } from 'unocss'

export default defineConfig({
	presets: [
		presetUno(),
		presetAttributify(),
		presetIcons({
			extraProperties: {
				'display': 'inline-block',
				'vertical-align': 'middle'
			},
			// 用这个插件的话，svg源文件中fill需要设置的值为#ffffff或者在icon后面添加?mask
			collections: {
				icon: FileSystemIconLoader('./src/assets/svg', svg => svg.replace(/#fff/, 'currentColor'))
			}
		}),
		// @ts-ignore
		presetRemToPx({
			baseFontSize: 4
		})
	],
	transformers: [
		// 在style标签里面以指令的方式去书写
		transformerDirectives(),
		// @ts-ignore 多属性合并写法
		transformerVariantGroup()
	],
	shortcuts: [
		['wh-full', 'w-full h-full'],
		['f-c-c', 'flex justify-center items-center'],
		['f-b-c', 'flex justify-between items-center'],
		['f-b-e', 'flex justify-between items-end']
	]
})
